<!--
 * @Author: 灰灰
 * @Date: 2021-12-27 22:23:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-12 11:34:05
-->
<template>
  <div v-if="pageType == 1"
       class="page-container">
    <!-- 搜索插槽 -->
    <div ref="searchBoxRef"
         class="search-container">
      <slot name="search"></slot>
      <div v-if="!$slots.search">
        <el-form :model="queryParams"
                 ref="searchForm"
                 inline
                 size="normal">
          <el-form-item :label="item.label"
                        v-for="(item, index) in formList"
                        :prop="item.prop"
                        :key="index">
            <el-input v-model="queryParams[item.prop]"
                      :placeholder="item.placeholder"></el-input>
          </el-form-item>
        </el-form>

      </div>
      <slot name="searchTool"></slot>
      <div v-if="!$slots.searchTool"
           class="">
        <el-button plain
                   size="medium"
                   type="primary"
                   @click="searchClick">查询</el-button>
        <el-button plain
                   size="medium"
                   @click="resetClick">重置</el-button>
      </div>
    </div>
    <!-- 正文 -->
    <div class="page-content">
      <common-table :height="height"
                    v-loading="custom ? tableLoading : loading"
                    v-if="!$slots.default"
                    :dataList="custom ? data : dataList"
                    :tableCols="tableCols">
        <slot name="tableCol"></slot>
      </common-table>
      <slot></slot>

      <el-row v-if="showPaging"
              class="paging-view">
        <el-pagination background
                       class="pagination"
                       :current-page="pageData.pageNum"
                       :page-size="pageData.pageSize"
                       :page-sizes="pageSizes"
                       :total="custom ? total : tTotal"
                       :layout="pageLayout"
                       @current-change="handlePageChange"
                       @size-change="handleSizeChange" />
      </el-row>
    </div>
    <slot name="foot"></slot>
  </div>
  <div v-else-if="pageType == 2"
       class="page-container">
    <slot></slot>
  </div>
</template>

<script>
import paging from '@/mixins/paging';
export default {
  mixins: [paging],
  props: {
    // pageType = 1 默认 是 固定搜索 表格 页面，2-自定义页面内容
    pageType: {// 页面类型 
      type: [String, Number],
      default: 1
    },
    custom: {// 是否自定义加载数据
      type: Boolean,
      default: false,
    },
    data: {// custom为true 才有效 自定义处理数据，需要传这个参数
      type: Array,
      default: () => []
    },
    formData: {},// 搜索对象 custom为true 才有效
    total: 0,// 总数 custom为true 才有效
    tableLoading: false, //custom为true 才有效

    dataApi: null,// 接口api
    showPaging: {// 是否开启分页功能
      type: Boolean,
      default: true,
    },
    tableCols: {
      type: Array,
      default: () => []
    },
    formList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      initLoad: !this.custom,
      pageApi: this.dataApi,
      height: 'auto',
    }
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler (val) {
        if (!val) return;
        this.queryParams = this.custom ? this.formData : this.queryParams;
      }
    }
  },
  computed: {

  },
  mounted () {
    this.$nextTick(() => {
      const searchHeight = this.$refs.searchBoxRef ? this.$refs.searchBoxRef.offsetHeight : 0;
      this.height = `calc(100vh - 40px - 40px - 92px - 32px - ${searchHeight + 'px'})`
    })
  },
  methods: {
    searchClick () {
      this.custom && this.$emit('searchCb');
      !this.custom && this.refresh();
    },
    resetClick () {
      // $listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
      // if (this.$listeners.parentEvent) {
      //   this.$emit('parentEvent')
      // }
      this.custom && this.$listeners.resetCb && this.$emit('resetCb');
      !this.custom && this.onReset();
    },
    // 切换页码
    handlePageChange (val) {

      this.custom && this.$emit("pagingChangeCb", val, -1);
      !this.custom && this.currentChange(val);
    },
    // 切换页数
    handleSizeChange (val) {
      this.custom && this.$emit("pagingChangeCb", -1, val);
      !this.custom && this.sizeChange(val);
    },
  }
}
</script>

<style lang="scss" scoped>
.page-content {
  margin-top: 20px;
}

.paging-view {
  text-align: right;
  margin-top: 20px;
}

.pagination {
}
</style>